To make good looking Vue apps, we need to style our components.
To make our lives easier, we can use components with styles built-in.
In this article, we’ll look at how to customize radio button inputs and create a star rating input.
Sizing
The size prop lets us change the size.
For example, we can write:
<template>
<div id="app">
<b-form-radio name="size" size="sm">Small</b-form-radio>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
and make our radio button small.
We can also set it to 'lg' to make it big.
Button Style Radio Buttons
We can make the radio buttons look like a button.
For instance, we can write:
<template>
<div id="app">
<b-form-radio-group v-model="selected" :options="options" buttons name="radios"></b-form-radio-group>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
selected: "",
options: [
{ text: "Apple", value: "apple" },
{ text: "Orange", value: "orange" }
]
};
}
};
</script>
We added the buttons prop to make them look like buttons.
The selected option will look like it’s pressed down.
Render as Native Radio Buttons
We can render radio buttons as native radio buttons with the plain prop.
For instance, we can write:
<template>
<div id="app">
<b-form-radio-group plain v-model="selected" :options="options" name="radios"></b-form-radio-group>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
selected: "",
options: [
{ text: "Apple", value: "apple" },
{ text: "Orange", value: "orange" }
]
};
}
};
</script>
Then there will be no Bootstrap styling applied to them.
Display Validation State
To display the validate state, we can add the state prop.
For example, we can write:
<template>
<div id="app">
<b-form-radio-group :state="state" v-model="selected" :options="options" name="radios"></b-form-radio-group>
<b-form-invalid-feedback :state="state">please choose one</b-form-invalid-feedback>
<b-form-valid-feedback :state="state">looks good</b-form-valid-feedback>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
selected: "",
options: [
{ text: "Apple", value: "apple" },
{ text: "Orange", value: "orange" }
]
};
},
computed: {
state() {
return this.selected.length > 0;
}
}
};
</script>
We have the state computed property which checks if the selected state is populated with the choices.
Then we set that as the state prop’s value for b-form-invalid-feedback and b-form-valid-feedback .
Now when we click on a choice, we’ll see everything displayed in green, including the validation message.
On the other hand, if we didn’t select anything, then everything is displayed in red.
Form Rating
If we want to add a star rating input when we can use the b-form-rating component.
This is a new component that’s available since 2.12.0.
For instance, we can use it by writing:
<template>
<div id="app">
<b-form-rating v-model="value"></b-form-rating>
<p>{{ value }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: 0
};
}
};
</script>
We just add the component and use v-model to set the inputted value to the state we want.
Then we show the value .
Read-Only Rating
The readonly prop can be added to the component.
For instance, we can write:
<template>
<div id="app">
<b-form-rating v-model="value" readonly></b-form-rating>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: 4
};
}
};
</script>
and we’ll see 4 stars. We can’t change its value.
Rating Styling
We can use the variant prop to change its styling.
For example, we can write:
<template>
<div id="app">
<b-form-rating v-model="value" variant="success"></b-form-rating>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: 4
};
}
};
</script>
Then the stars are green.
Other possible values for variant include 'warning' , 'success' , 'danger' , 'primary' , and 'info' .
To change the stars to other colors, we can use the color prop.
For instance, we write:
<template>
<div id="app">
<b-form-rating v-model="value" color="indigo"></b-form-rating>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: 4
};
}
};
</script>
Then the stars will be indigo.
Conclusion
We can change the size of the radio button inputs. The radio buttons can also be displayed as buttons.
Also, we can add validation state display to radio button groups.
We can also add a start rating input component to let users set rating scores.
